<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>07_元素的遍历</title>
		<!-- 元素遍历：  用于DOM树中遍历元素 【元素嵌套，父子级】 
		children()      功能：获取匹配元素集合中每个元素的子元素
		parent()        功能：获取匹配元素集合中每个元素的父元素
		
		siblings()      功能：获取匹配元素集合中每个元素的所有兄弟元素
		
		next()         功能：获取匹配元素集合中每个元素的下一个兄弟元素
		prev()         功能：获取匹配元素集合中每个元素的上一个兄弟元素
		
		each()         功能：遍历匹配元素的集合---遍历所有子元素
		               语法糖： each(function(index,element){
						   $(element).text(`${index}`)
						   注意：打印遍历的值，不可以使用单双引号+拼接
						   功能：获取到的元素，遍历元素内容
					   });
					   index：下标       element：元素  形参
		-->
		<script src="../js/jquery-1.11.1.js"></script>
		<style>
			.div_container{
				border: 1px solid #aaaaff;
				margin: 10px;
				padding: 10px;
			}
			.box{
				background-color: #aaffff;
				margin: 10px;
				padding: 10px;
			}
			button{
				margin: 10px;
			}
		</style>
	</head>
	<body>
		<!-- html div.container  父级  6个div.box 每个#box1 子集 
		    6个按钮
			css：  .container添加样式  边框1px  内外边距10px
			       .box添加样式       背景色  内外边距10px
				   button添加样式   外边距5px
		-->
		<div class="div_container">
			<div class="box" id="box1">盒子1</div>
			<div class="box" id="box2">盒子2</div>
			<div class="box" id="box3">盒子3</div>
			<div class="box" id="box4">盒子4</div>
			<div class="box" id="box5">盒子5</div>
			<div class="box" id="box6">盒子6</div>
		</div>
		<button id="childrenBtn">获取子元素</button>
		<button id="parentBtn">获取父元素</button>
		<button id="siblingsBtn">获取兄弟元素</button>
		<button id="nextBtn">获取下一个兄弟元素</button>
		<button id="prevBtn">获取上一个兄弟元素</button>
		<button id="eachBtn">遍历元素</button>
		<script>
			/*  1.点击  获取子元素  按钮  实现所有.div_container下的所有子元素添加背景色  */
			$("#childrenBtn").click(function(){
				//   通过  父找子  函数-------添加效果
				$(".div_container").children().css("background-color","aquamarine");
			});
			/*  2.点击 获取父元素  实现.div_container  添加背景色  */
			$("#parentBtn").click(function(){
				$(".div_container #box1").parent().css("background-color","#ffff7f");
			});
			/*  3.点击  获取兄弟元素  按钮  实现除了#box4的字体颜色不改变，其他均改变颜色  */
			$("#siblingsBtn").click(function(){
				$("#box4").siblings().css("color","#ff8250");
			});
			/*  4.点击  获取下一个兄弟元素  按钮  实现#box4的下一个兄弟，添加背景色  */
			$("#nextBtn").click(function(){
				$("#box4").next().css("background-color","#ff557f");
			});
			/*  5.点击  获取上一个兄弟元素  按钮  实现#box6的上一个兄弟  添加效果如下：圆  背景图  背景色  盒子阴影  */
			$("#prevBtn").click(function(){
				$("#box6").prev().css({"width":"200px",
				                      "height":"200px",
				                      "background-color":"#55ff7f",
				                      "border-radius":"50%",
									  "background-image":"url(../img/2.gif)",
									  "box-shadow":"5px 5px 10px #89f6ff",
									  "background-size":"100% 100%",
									  "font-size":"0"
				  });
			});
			/*  6.点击  遍历元素  按钮  实现每个盒子上，这是第几个盒子  */
			$("#eachBtn").click(function(){
				//  通过 .box  抓到6个元素【一组集合】
				$(".box").each(function(i,e){  // e->元素  i->下标
					//每个盒子上加文字，这是第几个盒子
					$(e).text(`这是第${i+1}个盒子`);
				});
			});
			
			/*
			大作业：tab选项卡
			BOM【了解】，吸顶灯效果案例
			小米页面效果
			*/
		</script>
	</body>
</html>